<template>
	<scroll-view class="main-table-scroll">
		<uni-table class="table-main-container" :border="border" :stripe="stripe" :emptyText="emptyText" :type="type" :rowKey="rowKey" :loading="loading">
			<!-- 表头行 -->
			<uni-tr class="data-row" @mousedown="onMouseDown">
				<uni-th class="column-css" v-for="(col, key, index) in columns" :key="key">{{ col.info }}</uni-th>
				<uni-th v-if="_pluginButton || _buttons.length > 0" class="column-css">
					设置
					<button v-if="_pluginButton&&datas!=null" class="button-plus" @click="onAddColumn">+</button>
				</uni-th>
			</uni-tr>
			<!-- 表格数据行 -->
			<uni-tr class="data-row" v-for="(row, rindex) in datas" :key="rindex" @mousedown.native="onMouseDown(rindex)">
				<uni-td v-for="(col, key, index) in columns" :key="index">{{ row[col.name] }}</uni-td>
				<uni-td v-if="_pluginButton || _buttons.length > 0" class="button-container">
					<view v-for="(button, index, id) in _buttons" :key="id">
						<button :style="{ 'background-color': button.color }" @click="onClick(rindex, button.id)" class="button">{{ button.name }}</button>
					</view>
				</uni-td>
			</uni-tr>
		</uni-table>
	</scroll-view>
</template>
<script>
let editButton = { id: 'edit', name: '编辑', color: '#1890ff' };
let deleteButton = { id: 'delete', name: '删除', color: '#ff0000' };
/**
 * DataTable 数据表格
 * @description 输入数据列和数据可以直接绑定数据
 * @tutorial https://ext.dcloud.net.cn/plugin?id=6656
 * @property {Object} columns json格式表示属性的key和显示列名 {"name":"姓名","info":"信息"}
 * @property {Array} datas json格式数组 [{"name":"小明","info":"班长"},{"name":"小红","info":"学委"}]
 * @property {Array} buttons 按钮,默认提供编辑和删除按钮 [{"id":"edit","name":"编辑"}]
 * @event {selected( rindex, id,data)} 按钮点击事件 rindex:行索引,id按钮的id,data数据（操作的行数据）
 */

export default {
	emits: ['selected'],
	props: {
		name: 'utab',
		// 列信息
		columns: {
			type: Array,
			required: false
		},
		// 数据信息
		datas: {
			type: Array,
			required: false
		},
		// 自定义按钮
		buttons: {
			type: Array,
			required: false,
			default() {
				return [];
			}
		},
		actions: {
			type: String,
			required: false,
			default() {
				return 'all';
			}
		},
		// 是否有竖线
		border: {
			type: Boolean,
			default: true
		},
		// 是否显示斑马线
		stripe: {
			type: Boolean,
			default: true
		},
		// 多选
		type: {
			type: String,
			default: ''
		},
		// 没有更多数据
		emptyText: {
			type: String,
			default: '没有更多数据'
		},
		loading: {
			type: Boolean,
			default: false
		},
		rowKey: {
			type: String,
			default: ''
		}
	},
	data() {
		return {};
	},
	computed: {
		_buttons: {
			get() {
				let buttons = [];
				if (this.actions == 'all') {
					buttons.push(editButton, deleteButton);
				} else {
					for (let char of this.actions) {
						if (char == '*') {
							buttons.push(editButton);
						}
						if (char == '-') {
							buttons.push(deleteButton);
						}
					}
				}
				return buttons.concat(this.buttons);
			}
		},
		_pluginButton: {
			get() {
				if (this.actions == 'all') {
					return true;
				}
				return this.actions.indexOf('+') != -1;
			}
		}
	},
	methods: {
		onClick(rindex, id) {
			this.$emit('selected', rindex, id, this.datas[rindex]);
		},
		onMouseDown(rindex) {
			this.$emit('selected', rindex, 'select', this.datas[rindex]);
		},
		onAddColumn() {
			if(this.datas != null){
				let data = { name: '', info: '', tips: '', type: 'text' };
				this.datas.push(data);
				let index = this.datas.length - 1;
				this.$emit('selected', index, 'add', this.datas[index]);
			}
		}
	}
};
</script>
<style lang="scss" scoped>
$red-color: #ff0000;
$blue-color: #2d8cf0;
$green-color: #47c789;
$white-color: #ffffff;
$gray-color: #f2f2f2;
$black-color: #3f3f3f;

.main-table-scroll{
	width: 100%;
	height: 100%;
}

.table-main-container {
	width: 100%;
	height: 100%;
}

.data-table {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

.data-row {
	flex: 1;
	margin: 0;
}

.column-css {
	background-color: $blue-color;
	color: $white-color;
	bold: true;
	font-size: 0.75em;
}

.button-container {
	display: flex;
	justify-content: flex-start;
}

.button {
	color: $white-color;
	font-size: 1em;
	padding: 0 1.34em;
	margin-left: 25rpx;
}
.button-plus {
	font-size: 1em;
	color: #2d8cf0;
	background-color: #ffffff;
}
</style>
